<template>
  <div id="stuCourseTeacher">
    <div>
      <el-table :data="scoreData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%"
        :row-style="{ height: '30px' }" :cell-style="{ padding: '10px' }" stripe>
        <el-table-column prop="sno" align="center" sortable label="学号"></el-table-column>
        <el-table-column prop="sname" align="center" label="姓名"></el-table-column>
        <el-table-column prop="cname" align="center" label="课程名"></el-table-column>
        <el-table-column prop="score" align="center" label="成绩"></el-table-column>
        <el-table-column fixed="right" align="center" label="操作">
          <template slot-scope="scope">
              <el-popconfirm title="确定发起申诉吗？" icon-color="red" @confirm="appealScore(scope.row)">
                <el-button type="danger" size="mini" slot="reference">申诉</el-button>
              </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block" style="margin-top:15px;">
        <el-pagination background align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data() {
    return {
      scoreData: [],
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10, // 每页的数据条数
    }
  },
  methods: {
    appealScore() {
      this.$message.success("申诉成功！");
    },
    getScore() {
      this.$http.get('/webapi/teacher/getSno/'+ sessionStorage.getItem('userId')).then(res => {
        this.scoreData = res.data;
        this.total = res.data.length;
      }).catch(e => { this.$message.error(e); })
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
  mounted() {
    this.getScore();
  }
}
</script>

<style>
.stuSearch {
  float: right;
  width: 500px;
}

.el-select {
  width: 118px;
}
</style>